<template>
  <div class="content">
    <header>
      <div class="FindTAB">
        <span>北京</span>
        <div>试试搜:呷哺呷哺</div>
        <b></b>
        <b></b>
        <b></b>
        <b></b>
      </div>
      <!-- 轮播图 -->
      <view class="uni-padding-wrap">
        <view class="page-section swiper">
          <view class="page-section-spacing">
            <swiper
              class="swiper"
              :indicator-dots="indicatorDots"
              :autoplay="autoplay"
              :interval="interval"
              :duration="duration"
              indicator-color="rgba(#fff,#fff,#fff,0.8)"
              indicator-active-color="#fff"
            >
              <swiper-item v-for="(item, index) in ImgArr" :key="index">
                <img :src="item.picUrl" alt="" />
              </swiper-item>
            </swiper>
          </view>
        </view>
      </view>
    </header>

    <nav>
      <div class="DivItem" v-for="(item, index) in NavArr" :key="index">
        <navigator
          :app-id="item.appId"
          :path="item.appLink"
          :target="item.appId ? 'miniProgram' : ''"
        >
          <img :src="item.img" alt="" />
        </navigator>
        <p>
          {{ item.name }}
        </p>
      </div>
    </nav>
    <!-- 限时特惠 -->
    <Times />
    <!-- 热门品牌 -->
    <PopularBrand />
    <!-- 吸顶 -->
    <CeilingScreen class="CeilingScreen"/>
    <!-- 商家列表 -->
    <div class="BaseQueryListBox">
      <div>
        <BaseQueryList />
      </div>
    </div>
  </div>
  
</template>

<script>
import { GetBannerImg , GetNavItem } from "./../../services";
import Times from "../../components/times.vue";
import BaseQueryList from "../../components/BaseQueryList";
import PopularBrand from "../../components/PopularBrand.vue";
import CeilingScreen from "../../components/ceilingScreen.vue";

export default {
  components: {
    PopularBrand,
    CeilingScreen,
    BaseQueryList,Times
  },

  data() {
    return {
      title: "Hello",
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      GetDatePar: {
        parmas_Banner: {
          cityId: 19,
          mwAuthToken:
            "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
          mAuthToken:
            "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
          fromw: 1401,
        },
        params_NavList: {
          cityId: 19,
          mwAuthToken:
            "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
          fromw: 1401,
        },
      },

      ImgArr: [],

      NavArr: [],
    };
  },

  onLoad() {},

  async onShow() {
    // 轮播图
    let Navparams = this.GetDatePar.parmas_Banner;
    let res = await GetBannerImg(Navparams);
    if (res) {
      this.ImgArr = res.data;
    }
    // nav
    let IconParams = this.GetDatePar.params_NavList;
    res = await GetNavItem(IconParams);

    if (res) {
      this.NavArr = res.data.items;
    }
  },
  methods: {},
};
</script>

<style lang="scss">
.CeilingScreen {
  position: sticky;
  top: 160rpx;
}

.test {
  width: 100%;
  height: 800px;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
}

header {
  font-size: 16px;
  padding: 60rpx 40rpx 0 40rpx;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  color: #fff;
  display: flex;
  background: linear-gradient(180deg, rgb(255, 37, 37), #fff);
  display: flex;
  flex-direction: column;
  align-content: center;
  .FindTAB {
    width: 100%;
    display: flex;
    justify-content: space-around;
    > div {
      width: 300rpx;
      height: 65rpx;
      border-radius: 30rpx;
      background: #fff5;
      font-size: 12px;
      text-align: center;
      line-height: 65rpx;
    }

    margin-bottom: 40rpx;
  }

  .uni-padding-wrap {
    width: 100%;
    border-radius: 20rpx;
    overflow: hidden;
    height: 300rpx;
    background: #f95;

    swiper-item {
      width: 100%;
      height: 100%;
      > img {
        width: 100%;
        height: 100%;
      }
    }
  }

  margin-bottom: 30rpx;
}
main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}
nav {
  width: 100%;
  height: 150rpx;
  display: flex;
  justify-content: space-around;

  > .DivItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    > navigator {
      width: 100rpx;
      height: 100rpx;

      img {
        width: 100%;
        height: 100%;
      }
    }
    > p {
      text-align: center;
      font-size: 12px !important;
    }
  }
}
//商家列表样式
.BaseQueryListBox {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  > div {
    width: 100%;
    padding: 20rpx 40rpx 0;
  }
}
</style>
